<template>
  <div class="ep-node-add">
    <div v-if="!processData.disabled" ref="nodeAddBtn" class="ep-node-add-btn">
      <ElPopover trigger="hover" placement="right" width="300px">
        <template #reference>
          <Icon icon="plus" class="ep-node-add-btn-icon" color="#FFFFFF" />
        </template>
        <div style="display: flex; justify-content: space-between; cursor: pointer">
          <div
            class="ep-node-item"
            v-for="item in nodeSelect"
            :key="item.type"
            @click="addNode(item)"
            @mouseenter="item.selected = true"
            @mouseleave="item.selected = false"
          >
            <div
              :style="{
                border: '1px solid gainsboro',
                borderRadius: '50%',
                padding: '20px',
                backgroundColor: item.selected ? '#1c84c6' : '#FFFFFF'
              }"
            >
              <Icon :icon="item.icon.name" size="35px" :color="item.selected ? '#FFFFFF' : item.icon.color" />
            </div>
            <div style="width: 100%; text-align: center">
              {{ item.title }}
            </div>
          </div>
        </div>
      </ElPopover>
    </div>
  </div>
</template>

<script setup lang="ts" name="addNode">
import { ref, inject } from "vue";
import { ElPopover } from "element-plus";
import { KEY_PROCESS_DATA, nodeConfig } from "../flow";
import { Icon } from "@/components/Icon";
import { deepClone, generateId } from "../../util/common";
const props = defineProps({
  node: {
    // 传入的流程节点数据
    type: Object,
    default: () => {}
  }
});
const nodeSelect = ref([]);
const processData = inject(KEY_PROCESS_DATA);
Object.keys(nodeConfig).forEach(key => {
  let item = nodeConfig[key];
  // 生成可增加节点数据
  if (item.canAdd) {
    nodeSelect.value.push({
      title: item.defaultNode.nodeName,
      type: key,
      icon: item.icon,
      isSelected: false
    });
  }
});
// 添加节点
const addNode = node => {
  const nodeType = node.type;
  let typeConfig = nodeConfig[nodeType];
  if (typeConfig) {
    const addNode = deepClone(typeConfig.defaultNode);
    addNode.id = "node" + generateId();
    const nextNode = props.node!["nextNode"];
    addNode.nextNode = nextNode;
    props.node!["nextNode"] = addNode;
  }
};
</script>

<style lang="scss" scoped>
.ep-node-add {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 0px;

  .ep-node-add-btn {
    position: absolute;
    z-index: 10;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-60%);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    border-radius: 40px;
    background-color: #1c84c6;
    box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.2);
    transition-property: width, height;
    transition-duration: 0.1s;

    &:hover {
      width: 35px;
      height: 35px;
    }

    .ep-node-add-btn-icon {
      font-size: 20px;
      font-weight: bold;
      color: #ffffff;
      cursor: pointer;
    }
  }

  .ep-node-item {
    border: 1px solid gainsboro;
    border-radius: 50%;
    &:hover {
    }
  }

  &:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    margin: auto;
    width: 2px;
    height: 100%;
    background-color: #cacaca;
  }
}
</style>
